<template>
	<view>
		<zx-nav></zx-nav>
		<view class="wrap">
			<view class="key-input">
				<view class="title">输入验证码</view>
				<view class="tips">{{ '验证码已发送至 +' + mobile }}</view>
				<code-input @change="change" @finish="finish" class="vue-ref" ref="codeInput" :focus="true" :maxlength="maxlength" :value="value" width="100"></code-input>
				<text :class="[error ? 'error' : '']">验证码错误</text>
				<view class="captcha">
					<text @tap="noCaptcha" :class="[show ? 'noCaptcha' : '']" :style="{ color: themeColor }">重新发送验证码</text>
					<text :class="['t-grey', !show ? 'regain' : '']">{{ showSecond + '秒后可重新获取' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import codeInput from '@/components/code-input';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	data: function() {
		return {
			opt: {},
			maxlength: 6,
			value: '',
			second: 60,
			show: !1, //显示重新发送验证码
			error: !1,
			mobile: '',
			openid: '',
			unionid: '',
			nice_name: '',
			avatar: '',
			showSecond: 0,
			entry_id: 3
		};
	},
	components: { codeInput },
	computed: {
		pid: function() {
			return this.$store.state.pid;
		}
	},
	onLoad: function(e) {
		this.opt = e;
		this.mobile = e.mobile;
		this.openid = e.openid;
		this.unionid = e.unionid;
		this.nice_name = e.nice_name;
		this.avatar = e.avatar;
		this.getCaptcha(this.mobile);
	},
	methods: {
		...mapMutations(['updateIsLogin']),
		...mapActions(['getUserInfo']),
		loginBack: function() {
			switch (this.opt.backtype) {
				case '1':
					console.log('redirectTo 跳转'),
						uni.redirectTo({
							url: this.opt.backpage
						});
					break;

				case '2':
					console.log('switchTab 跳转'),
						uni.switchTab({
							url: this.opt.backpage
						});
					break;

				case '3':
					console.log('reLaunch 跳转'),
						uni.reLaunch({
							url: this.opt.backpage
						});
					break;

				default:
					getCurrentPages().length > 2
						? uni.navigateBack({
								delta: 2
						  })
						: uni.switchTab({
								url: '/pages/mine/mine'
						  });
			}
		},
		noCaptcha: function() {
			this.getCaptcha(this.mobile);
			this.show = !1;
		},
		getCaptcha: function(e) {
			var t = this;
			this.getSms(e);
			this.showSecond = this.second;
			var n = setInterval(function() {
				t.showSecond--;
				if (t.showSecond <= 0) {
					t.show = !0;
					clearInterval(n);
				}
			}, 1e3);
		},
		getSms(mobile) {
			this.$postAction(this.$api.getSms + mobile);
		},
		change: function(e) {},
		finish: function(e) {
			let { pid, unionid, openid } = this;
			let param = {
				phone: this.mobile,
				verify: e,
				pid,
				unionid,
				openid
			};
			this.$postAction(this.$api.login, param).then(da => {
				if (da.code == 0) {
					uni.setStorageSync('login_type', da.data.login_type);
					uni.setStorageSync('token', da.data.token);
					this.updateIsLogin(true);
					this.getUserInfo();
					// this.getconfig();
					this.loginBack();
				}
				uni.showToast({
					title: da.msg,
					icon: 'none'
				});
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}

.wrap {
	padding: 80rpx;
}

.box {
	color: 555;
	font-size: 30rpx;
	margin: 30rpx 0;
}

.key-input {
	padding: 30rpx 0;
	text-align: center;
}

.key-input text {
	display: none;
}

.key-input .error {
	color: red;
	display: block;
	font-size: 30rpx;
	margin: 20rpx 0;
}

.title {
	color: #333;
	font-size: 50rpx;
}

.key-input .tips {
	color: #333;
	font-size: 30rpx;
	margin-bottom: 60rpx;
	margin-top: 20rpx;
}

.captcha {
	font-size: 28rpx;
	margin-top: 40rpx;
}

.captcha .noCaptcha,
.captcha .regain {
	display: block;
}
</style>
